
<script setup lang="js">
import Hello from "./Hello.vue"

import {ref,watch,provide} from "vue"
let name=ref("张三")
let ss=ref("show")

//开关避免无限递归渲染
let opens=ref(false)
function contrlOpens(){
  //切换
  opens.value=!opens.value
}

function a(){
  name.value="李四"
  ss.value="hide"
}

//给子送过去
provide("opens",opens)

watch(name,(newOne,oldOne)=>{
  console.log('App中的变化：',newOne,oldOne)
})
watch(ss,(newOne,oldOne)=>{
  console.log('ss变化：',newOne,oldOne)
})

</script>

<template>
  <div id="name">{{ name }}</div>
  <button @click="a">点击改变名字</button>

  <button @click="contrlOpens">{{opens?'隐藏子套父':'显示子套父'}}</button>


  <!-- 这是父套子 -->
  <Hello :pp="ss"></Hello>
</template>

<style scoped>
div#name{
  width: 100px;
  height: 100px;
  background-color: rgb(163, 163, 219);
  color:rgb(122, 32, 32);
  font-size: medium;
  font-weight: bold;
}
</style>




<!-- <script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style> -->
